<template>
  <el-dialog
    top="30px"
    width="1000px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <div>
      <el-form :inline="true">
        <el-form-item>
          <el-input
            placeholder="借款客户"
            @keyup.enter.native="getData()"
            @clear="getData()"
            clearable
            v-model="params.customer_name"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <c-select
            placeholder="客户类型"
            clearable
            number-key
            :options="enumCustomerType"
            v-model="params['org_class.eq']"
            @change="getData()"
          ></c-select>
        </el-form-item>
        <el-form-item>
          <select-date-cascader
            placeholder="放款时间"
            class="form-control-ml"
            v-model="pickDateLoad"
            @select="handleDateLoadChange"
          ></select-date-cascader>
        </el-form-item>
        <el-form-item>
          <select-date-cascader
            placeholder="到期时间"
            class="form-control-ml"
            v-model="pickDateLoadEnd"
            @select="handleDateLoadEndChange"
          ></select-date-cascader>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" @click="getData()">查询</el-button>
        </el-form-item>
      </el-form>

      <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>
      <div class="query-pagination">
        <div></div>
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          :page-sizes="[15, 100, 200, 500, 1000]"
          :current-page.sync="params.index"
          :page-size="params.size"
          :total="tableCount"
          @current-change="getData"
        ></el-pagination>
      </div>

      <project-view-dialog
        :visible.sync="viewVisible"
        :batch-no="attachNo"
        :query-id="queryId"
      ></project-view-dialog>

      <continue-edit-dialog
        :visible.sync="editVisible"
        :form-data="formData"
        @success="handleSuccess()"
      ></continue-edit-dialog>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumCustomerType, dataAdapter, parseCascaderDate } from '@/bank/views/limit/index'

import hndTableMixin from '@/bank/views/business/limit/history/mixins'

import ProjectViewDialog from '@/bank/views/business/limit/history/ProjectViewDialog'
import SelectDateCascader from '@/components/select/SelectDateCascader'
import ContinueEditDialog from '@/bank/views/business/limit/history/postloan/components/continue/ContinueEditDialog'
export default {
  components: {
    ProjectViewDialog,
    SelectDateCascader,
    ContinueEditDialog,
  },
  mixins: [hndTableMixin],
  props: {
    visible: Boolean,
    channelType: {
      type: String,
      default: '0',
    },
    isRuralDev: {
      type: String,
      default: '0',
    },
  },
  data() {
    return {
      enumCustomerType,
      loading: false,
      params: {
        index: 1,
        size: 10,
        'load_beh_status.eq': '1',
        'review_approval.gte': 4,
        'review_approval.neq': 9,
        'is_replace.neq': 1,
        customer_name: '',
      },
      order: {
        load_date: 'desc',
      },
      tableName: 'datum_one_county_industry',
      tableColumns: [
        {
          attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        {
          attrs: { label: '放款银行名称', prop: 'bankName', align: 'center' },
        },

        { attrs: { label: '客户类型', prop: 'org_class_name', align: 'center' } },
        { attrs: { label: '贷款金额(万元)', prop: 'warranty_amount', align: 'center' } },
        { attrs: { label: '在保余额(万元)', prop: 'left_funds', align: 'center' } },
        { attrs: { label: '借据号', prop: 'iou_no', align: 'center' } },
        { attrs: { label: '证件号', prop: 'customerNo', align: 'center' } },
        { attrs: { label: '放款日期', prop: 'loadDate', align: 'center', minWidth: '100px' } },
        { attrs: { label: '到期日期', prop: 'loadEndDate', align: 'center', minWidth: '100px' } },
        {
          attrs: { label: '操作', align: 'center', width: '120px' },
          operations: [
            { name: '续贷', event: this.onEdit },
            { name: '查看', event: this.handleView },
          ],
        },
      ],
      pickDateLoad: [],
      pickDateLoadEnd: [],

      tableData: [],
      tableCount: 0,

      viewVisible: false,
      attachNo: '',
      queryId: '',

      editVisible: false,
      formData: {},
    }
  },
  computed: {
    ...mapGetters(['clientId', 'userId']),
    isSubmit() {
      return this.user.scopes.includes('indoneBI')
    },
  },
  watch: {},
  created() {
    this.params['channel_type.eq'] = this.channelType
    this.params['is_rural_dev.eq'] = this.isRuralDev
    this.getData()
  },
  mounted() {},
  methods: {
    onEdit(row = {}) {
      this.editVisible = true
      this.formData = {
        customer_related_id: row.customer_related_id,
        warranty_amount: row.warranty_amount,
        left_funds: row.left_funds,
      }
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handleSizeChange(val) {
      this.params.size = val
      this.getData()
    },
    handleDateLoadEndChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['load_end_date.gte'] = start
      this.params['load_end_date.lte'] = end
      this.getData()
    },
    handleDateLoadChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['load_date.gte'] = start
      this.params['load_date.lte'] = end
      this.getData()
    },
    handleSuccess() {
      this.$emit('success', true)
      this.getData()
    },
    dataAdapter(item) {
      item = dataAdapter(item)
      item.unGuaDate = this.$utils.dateFormat(item.un_gua_date, 'yyyy-MM-dd') || '-'
      item.bankName = item.claim_bank_name || item.bank_name
      item.customerNo = +item.customer_type === 1 ? item.register_no : item.lender_idcard
      return item
    },

    handleView(row = {}) {
      this.queryId = row.customer_related_id
      this.attachNo = row.un_gua_batch_id || ''
      this.viewVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
